<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.router-link-active{
  background-color: red;
}
.news .router-link-exact-active{
  background-color: orange;
}
</style>
<body>
<div id="app">
  <router-link tag="button" to="/home">首页</router-link>
  <router-link tag="button" to="/news">新闻</router-link>
  <router-link tag="button" to="/about">关于</router-link>
  <hr>
  <router-view></router-view>
</div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/vue-router/3.5.1/vue-router.js"></script>
<script>
const NativeNews = {
  template:`
    <div>
      <h3>我是国内新闻</h3>  
    </div>
  `
}
const AbroadNews = {
  template:`
    <div>
      <h3>我是国外新闻</h3>  
    </div>
  `
}
const HotNews = {
  template:`
    <div>
      <h3>我是热点新闻</h3>  
    </div>
  `
}
const Home = {
  template:`
    <div>
      <h2>我是首页</h2>  
    </div>
  `
}
const News = {
  template:`
    <div class="news">

      <h2>我是新闻页</h2> 
      <button @click="enterNative">国内新闻</button> 
      <button @click="enterAbroad">国外新闻</button>
      <button @click="refresh">热点新闻</button> 
      <hr/>
      <router-view></router-view>
    </div>
  `,
  data(){
    return {
      isShow: false
    }
  },
  methods: {
    refresh(){
      this.$router.go(0)
    },
    enterNative(){
      this.$router.push('/news/native')
    },
    enterAbroad(){
      this.$router.replace('/news/abroad')
    }
  },
  mounted(){
    console.log( this );
  }
}
const About = {
  template:`
    <div>
      <h2>我是关于我们</h2>  
    </div>
  `
}
const routes = [ // 定义路由规则
  {
    path: '/home',
    component: Home
  },
  {
    path: '/news',
    component: News,
    children: [ // 子路由配置
      {
        path:'/news/native',
        component: NativeNews
      },
      {
        path: '/news/abroad',
        component: AbroadNews
      }
    ]
  },
  {
    path: '/about',
    component: About
  }
]
// 创建路由对象
const router = new VueRouter({
  routes
});
const vm = new Vue ( {
  el: '#app',
  router
} )
</script>
</html>